<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
		<style type="text/css">
			body {
				margin: 0;
				padding: 0;
			}

			#part1 {
				width: 500px;
				height: 800px;
				background-repeat: no-repeat;
				background-size: 100%;
				background-image: url(1.png);
				margin: 0 auto;
			}

			#part2 {
				background-image: url(2.png));
				width: 500px;
				height: 800px;
				margin: 0 auto;
				background-repeat: no-repeat;
				background-size: 100%;
			}

			#part3 {
				width: 500px;
				height: 800px;
				background-image: url(3.jpg);
				background-repeat: no-repeat;
				background-size: 100%;
				margin: 0 auto;
			}

			#ad1,
			#ad2 {
				position: fixed;
				top: 200px;
				background-size: 100%;
				width: 100px;
				height: 200px;
				background-image: url(4.png);
			}

			/*对联靠左*/
			#ad1 {
				left: 0;
			}

			/*对联靠右*/
			#ad2 {
				right: 0;
			}

			/*弹窗广告样式*/
			#ad3 {
				position: fixed;
				bottom: -350px;
				/* 将广告隐藏在页面下方 */
				right: 0px;
				height: 350px;
				width: 250px;
				background-image: url(6.jpg);
				transition: transform 0.5s ease-in-out;
				/* 添加transition属性 */
				z-index: 1000;

			}

			/*关闭按钮图片样式*/
			#close,
			#close1 {
				width: 50px;
				height: 30px;
				object-fit: cover;
				position: absolute;
				/*并将该元素定位在其父元素的右下角 */
				bottom: 0;
				right: 0;
				background-image: url(7.jpg);
				background-repeat: no-repeat;
				background-size: cover;
				background-position: center center;
			}

			/*关闭按钮图片样式(弹窗广告)*/
			#close2 {
				width: 50px;
				height: 30px;
				object-fit: cover;
				position: absolute;
				top: 0;
				right: 0;
				background-image: url(7.jpg);
				background-repeat: no-repeat;
				background-size: cover;
				background-position: center center;
			}
		</style>
	</head>

	<body>
		<div id="part1"></div>
		<div id=ad1>
			<div id="close"></div>
		</div>
		<div id="part2"></div>
		<div id=ad2>
			<div id="close1"></div>
		</div>
		<div id="part3"></div>
		<div id="ad3" style="display:none;">
			<div id="close2"></div>
		</div>
	</body>

		<script>					
				let close = document.querySelector("#close"); //获取元素
				let close1 = document.querySelector("#close1");
				let close2 = document.querySelector("#close2");
				let ad1 = document.getElementById('ad1');
				let ad2 = document.getElementById('ad2');
				//关闭左边
				close.onclick = function() {
					
					ad1.style.display = "none";
				}
				//关闭右边
				close1.onclick = function() {
					
					ad2.style.display = "none";
				}
				//关闭弹窗广告  
				close2.onclick = function() {
					let ad3 = document.getElementById('ad3');
					ad3.style.display = "none";
				}
				//添加一个事件监听器，以在页面加载后显示弹窗广告
				window.addEventListener('load', function() {
					let ad3 = document.getElementById('ad3');
					ad3.style.display = "block";
				});
		
				// 1.5s弹出弹窗广告
				window.onload = function() {
					let ad3 = document.getElementById('ad3');
					setTimeout(function() {
						ad3.style.transform = "translateY(-350px)"; // 将广告向上移动
					}, 1500);
				}
			</script>
</html>